<template>
  <div class="new-tab-page large parkinglot-wrapper edit-rule-pic" key="editPic">
    <div class="page-main-title">
      编辑
      <i class="return-icon" @click="back"></i>
    </div>
    <div class="main-content" v-if="parkBaseInfo">
      <el-form
        :model="parkBaseInfo"
        :rules="parkBaseInfoRules"
        ref="parkBaseInfo"
        label-width="130px"
        size="small"
        class="zb-form rule-form"
        label-position="left"
      >
        <div class="el-form--inline zb-inline-form rule-inline-form">
          <el-form-item
            label="缴费后离场时限"
            class="input-width-control hasUnit"
            prop="timeoutLength"
            :rules="[{required: true,validator: checkUnit,trigger: 'blur'}]"
          >
            <el-input type="number" v-model.number="parkBaseInfo.timeoutLength"></el-input>
            <span class="unit">分钟</span>
          </el-form-item>

          <el-tooltip effect="dark" content="缴费后的离场时间，超时重新计费" placement="top">
            <i class="el-icon-question question-icon"></i>
          </el-tooltip>
        </div>

        <input type="file" id="upload-input" style="position: fixed; left: 10000px;" />

        <template v-if="parkBaseInfo.chargePicChangeFlag">
          <el-form-item label="收费规则图片" prop="chargeRulePicStr" class="upload-form-item">
            <el-input v-model="parkBaseInfo.chargeRulePicStr" v-show="false"></el-input>
            <el-button type="primary" plain @click="selectImgFile">上传图片</el-button>
            <p class="upload-tips">只能上传jpg/png文件，且不超过900kb，最佳比例为16:9</p>
          </el-form-item>
          <div class="img-box" style="margin-left: 130px">
            <el-image style="width: 420px" :src="curUploadImg" fix="contain"></el-image>
          </div>
        </template>

        <template v-if="parkBaseInfo.chargePicChangeFlag === null">
          <el-form-item label="收费规则图片" class="upload-form-item">
            <el-button type="primary" plain @click="selectImgFile">上传图片</el-button>
            <p class="upload-tips">只能上传jpg/png文件，且不超过900kb，最佳比例为16:9</p>
          </el-form-item>
          <div class="img-box" style="margin-left: 130px">
            <el-image
              style="width: 420px"
              :src="domain + parkBaseInfo.chargeRulePicUrl"
              fix="contain"
            ></el-image>
          </div>
        </template>
      </el-form>

      <el-form label-width="130px" size="small" class="zb-form rule-form">
        <el-form-item size="medium" class="action-box" label-width="0px">
          <el-button type="primary" @click="saveEdit">保存</el-button>
          <el-button type="primary" plain @click="back">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import pageScript from "./EditPic.js";
export default pageScript;
</script>

<style lang="less" scoped>
@import "../../../../../assets/less/base/variables.less";
@import "../../../../../assets/less/base/newTabPageCommom.less";
.main-content {
  margin: 0 20px;
  margin-top: 20px;
}
</style>

<style lang="less" scoped>
@import "../../../AddParkingLot/AddParkingLotComponents/FormContent.less";
.zb-form {
  width: 480px;
}
</style>

<style lang="less">
@import "../../../../../assets/less/base/zbForm.less";

.edit-rule-pic {
  .upload-form-item {
    .el-form-item__content {
      display: flex;
      .upload-tips {
        margin-left: 15px;
      }
    }
  }
}
</style>

<style lang="less" scoped>
@import "./EditPic.less";
</style>
